<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item index="1">
              <el-icon><location /></el-icon>
                <span>
                  首页
                  <router-link to="/"></router-link>
                </span>
            </el-menu-item>
            <el-menu-item index="2">
              <el-icon><location /></el-icon>
                <span>
                  <router-link to="/admin">管理员列表</router-link>
                </span>
            </el-menu-item>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><location /></el-icon>
                <span>
                  <router-link to="/staff">人员管理</router-link>
                </span>
              </template>
                <el-menu-item index="3-1">人员列表</el-menu-item>
                <el-menu-item index="3-2">人员考勤</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <el-icon><location /></el-icon>
                <span>
                  <router-link to="/warehouse">仓储管理</router-link>
                </span>
              </template>
                <el-menu-item index="4-1">仓库列表</el-menu-item>
                <el-menu-item index="4-2">进出记录</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>
                <el-icon><location /></el-icon>
                <span>
                  <router-link to="/customer">客户管理</router-link>
                </span>
              </template>
                <el-menu-item index="5-1">客户列表</el-menu-item>
                <el-menu-item index="5-2">客户详情</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="6">
              <template #title>
                <el-icon><location /></el-icon>
                <span>
                  <router-link to="/orders">订单管理</router-link>
                </span>
              </template>
                <el-menu-item index="6-1">订单列表</el-menu-item>
                <el-menu-item index="6-2">订单修改</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="7">
              <template #title>
                <el-icon><location /></el-icon>
                <span>
                  <router-link to="/work">任务管理</router-link>
                </span>
              </template>
                <el-menu-item index="7-1">任务统计</el-menu-item>
                <el-menu-item index="7-2">任务修改</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="8">
              <el-icon><location /></el-icon>
                <span>
                  <router-link to="/information">个人信息</router-link>
                </span>
            </el-menu-item>
            <el-menu-item index="9">
              <el-icon><location /></el-icon>
                <span>
                  <router-link to="/miniprogram">小程序管理</router-link>
                </span>
            </el-menu-item>
            
            
          </el-menu>
          <!-- <nav>
            <router-link to="/">首页</router-link> |
            <router-link to="/admin">管理员列表</router-link>
            <router-link to="/staff">人员管理</router-link>
            <router-link to="/warehouse">仓储管理</router-link>
            <router-link to="/customer">客户管理</router-link>
            <router-link to="/orders">订单管理</router-link>
            <router-link to="/work">任务管理</router-link>
            <router-link to="/information">个人信息</router-link>
            <router-link to="/miniprogram">小程序管理</router-link>
          </nav> -->
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
  
  
</template>

<script setup lang="ts">

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style lang="scss">
@import url(./assets/css/reset.css);
#app{
  width: 100%;
  height: 100%;
}
.common-layout{
  width: 100%;
  height: 100%;
  .el-container{
    width: 100%;
    height: 100%;
    .el-header{
      background: #000;
    }
    .el-container{
      width: 100%;
      height: 100%;
      &>.el-aside{
        width: 2.5rem;
        height: 100%;
        background: #545c64;

      }
      &>.el-main{
        background: #F2F3F5;
      }
    }
  }
  
}

</style>
